<template>
	<ContentWrap>

		<div>
			<div class="title">{{ menuList[id -1].name }}</div>
			<div>
				<el-table :data="list" border style="width: 100%">
					<el-table-column prop="className" label="问题" width="800" />
					<el-table-column prop="category" label="答案选择" width="800">
						<template #default="scope">

							<el-input style="width: 400px;" v-model="scope.row.resultValue" placeholder="请输入"
								v-if="scope.row.category == 0" @input="handleInput(scope.row.className)" />
							<div v-else>
								<el-select
									v-if="scope.row.category != 14 && scope.row.category != 13 && scope.row.category != 115
									&& scope.row.category != 99
									&& scope.row.category != 200 && scope.row.category != 201 && scope.row.category != -1 "
									class="m-2" placeholder="请选择" @blur="qingkon" @click="getCate(scope.row.category)"
									v-model="scope.row.resultValue">
									<el-option v-for="item in categorys.data" :key="item" :label="item" :value="item" />
								</el-select>

							</div>

              <div class="m-2" v-if="scope.row.category == -1">
                <div class="input-container">
                  <el-text  >
                    <el-input v-model="totalTj"  readonly oninput="" ></el-input>
                  </el-text>
                </div>
              </div>

              <div class="m-2" v-if="scope.row.category == 200">
                <div class="input-container">
                  <el-input v-model="scope.row.param1"  oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="请输入"></el-input>
                  <el-text>{{scope.row.units}}</el-text>
                  <el-input type="hidden" v-if="scope.row.units" v-model="scope.row.units" ></el-input>
                </div>
              </div>


              <div class="m-2" v-if="scope.row.category == 201">
                <div class="input-container">
                  <el-text>连续逾期 </el-text>
                  <el-input v-model="scope.row.param1" oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="请输入连续逾期"></el-input>
                  <el-text>{{scope.row.units}}</el-text>
                  <el-input v-if="scope.row.units" v-model="scope.row.units" disabled></el-input>
                </div>

                <div class="input-container">
                  <el-text>累计逾期 </el-text>
                  <el-input v-model="scope.row.param3" oninput="value=value.replace(/[^\-?\d.]/g,'')
　　                      .replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
　　                      .replace('-','$#$').replace(/\-/g,'').replace('$#$','-')" placeholder="请输入累计逾期"></el-input>
                  <el-text>{{scope.row.units}}</el-text>
                  <el-input v-if="scope.row.units" v-model="scope.row.units" disabled></el-input>
                </div>
              </div>


						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<footer>

			<div class="btns" @click="sale">保存</div>
		</footer>

	</ContentWrap>

</template>


<script lang="ts" setup>
	import * as UsersApi from "@/api/hutai/salesman";
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { ref } from "vue";
	import { useRoute } from 'vue-router';
  import {getAgentPublicitySelectListByTypesName} from "@/api/hutai/salesman";
	const route = useRoute();
	const id = route.query.id
	const orderId = route.query.orderId
  const totalTj = ref(0)
	const menuList = reactive([
		{ id: 1, name: '按揭房信贷资料' },
		{ id: 2, name: '保单贷资料' },
		{ id: 3, name: '个人贴息贷资料' },
		{ id: 4, name: '工薪贷资料' },
		{ id: 5, name: '公积金贷资料' },
		{ id: 6, name: '企业贴息贷资料' },
		{ id: 7, name: '全款车按揭车信贷资料' },
		{ id: 8, name: '商业商住楼写字楼厂房一抵押贷资料' },
		{ id: 6, name: '商业商住楼写字楼厂房二抵押贷资料' },
		{ id: 10, name: '商业写字楼按揭贷资料' },
		{ id: 11, name: '税贷资料' },
		{ id: 12, name: '小微企业信贷资料' },
		{ id: 13, name: '信用卡贷资料' },
		{ id: 14, name: '住宅按揭贷资料' },
		{ id: 15, name: '住宅抵押贷资料' },
		{ id: 16, name: '住宅二次抵押贷资料' }
	])

	let list = ref([])

	const getList = async () => {
		list.value = await UsersApi.getAgentPublicitySelectListByTypesName(id,orderId)
		list.value.map(v => {
      v.pid = v.id
			v.left = false
			if (v.category == '0') {
				v.left = true
				v.category = ''
			}else if (v.category == -1){
        totalTj.value = v.resultValue
      }
		})

	}

  const handleInput = async(n) =>{
      var sum = 0;
      if (n=='银行抵押月供' || n=='银行按揭月供' || n=='银行信贷月供' || n=='小贷公司月供' || n=='网贷月供') {
        list.value.forEach(v => {
          if (v.className=='银行抵押月供' || v.className=='银行按揭月供' || v.className=='银行信贷月供' || v.className=='小贷公司月供' || v.className=='网贷月供') {
            var number = Number(v.resultValue)
            if (isNaN(number)) {
              // console.log("ss")
            }else {
              sum += number
            }
          }
        })
      }
      totalTj.value = sum
  }

	const categorys = ref([])
	const getCate = async (id) => {
		categorys.value = await UsersApi.getPublicitySelectListByClassName(id)
	}

	const sale = async () => {
		let arr = ref([])
		list.value.forEach(v => {
			let obj = ref({})
			let data = v.resultValue ? v.resultValue : ''
      if (v.category == -1) {
        obj.value.resultValue = totalTj.value
      }else if (v.category == 200) {
        obj.value.resultValue = v.param1
        obj.value.param1 = v.param1
      }else if(v.category == 201){
        obj.value.resultValue = v.param1+"-"+v.param3
        obj.value.param1 = v.param1
        obj.value.param3 = v.param3
      }else {
        obj.value.resultValue = data
      }
      obj.value.category = v.category
      obj.value.units = v.units
      obj.value.pid = v.pid
			obj.value.orderId = orderId
			obj.value.categoryName = v.className
			obj.value.isPassed = '1'
			obj.value.typeName = v.typeNames
			arr.value.push(obj.value)
		})
		
		let parmas = {
			orderId: orderId,
			voList: arr.value
		}

		await UsersApi.saveData(parmas)
    ElMessage({
      type: 'success',
      message: '保存成功',
    })

	}


	/** 初始化 **/
	onMounted(() => {
		getList()
	});
</script>


<style lang="scss">
	.title {
		padding: 20px;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}

	.selectBtn {
		width: 200px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid #e8e8e8;
		border-radius: 5px;
	}

	.btns {
		width: 200px;
		height: 30px;
		padding: 20rpx;
		margin: 20px;
		line-height: 30px;
		color: #fff;
		text-align: center;
		cursor: pointer;
		background-color: #c96363;
		border-radius: 5px;
	}

  .input-container .el-input {
    /* 你可以在这里添加一些额外的样式，比如宽度 */
    width: 30%; /* 假设你想要它们平分宽度，并留一点空隙 */
    margin-right: 0.5%; /* 或者使用padding等属性来调整间距 */
  }
</style>

